var timeout;

function countDown() {
	if (timeout) clearTimeout(timeout);
	if (localStorage.pinned) return;
	timeout = setTimeout(function() {
		window.close();
	}, localStorage.duration || 3000);
}

countDown();

Ext.require([
	'Ext.panel.*',
	'Ext.toolbar.*',
	'Ext.button.*',
	'Ext.container.ButtonGroup',
	'Ext.layout.container.Table'
]);

function time(seconds) {
	var h = Math.floor(seconds / 3600);
	var m = Math.floor(seconds % 3600 / 60);
	var s = Math.floor(seconds % 3600 % 60);
	return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
}

var needReact = true;
var toolbar;

Ext.onReady(function() {
	Ext.create('Ext.toolbar.Toolbar', {
		renderTo: "notification",
		width: 500,
		items: [
			{
				id: "title",
				xtype: "label",
				text: chrome.extension.getBackgroundPage().bg.currentTrackName
			}
		]
	});
	
	toolbar = Ext.create('Ext.toolbar.Toolbar', {
		renderTo: "notification",
		width: 500,
		items: [
			{
				id: "play",
				icon: "images/playsmall.png",
				disabled: !chrome.extension.getBackgroundPage().bg.currentTrack,
				pressed: !chrome.extension.getBackgroundPage().bg.audio.paused,
				enableToggle: true,
				toggleHandler: function(button, state) {
					if (state) {
						chrome.extension.getBackgroundPage().bg.play();
					}
					else {
						chrome.extension.getBackgroundPage().bg.pause();
					}
				}
			},
			{
				id: "prev",
				icon: "images/prevsmall.png",
				disabled: !chrome.extension.getBackgroundPage().bg.prevTrack,
				handler: function() {
					chrome.extension.getBackgroundPage().bg.prev(true);
				},
			},
			{
				id: "next",
				icon: "images/nextsmall.png",
				disabled: !chrome.extension.getBackgroundPage().bg.nextTrack,
				handler: function() {
					chrome.extension.getBackgroundPage().bg.next(true);
				},
			},
			{
				id: "position",
				xtype: "slider",
				disabled: !chrome.extension.getBackgroundPage().bg.currentTrack,
				width: 134,
				value: chrome.extension.getBackgroundPage().bg.position,
				increment: 1,
				minValue: 0,
				maxValue: 100,
				tipText: function(thumb){
					return time(chrome.extension.getBackgroundPage().bg.time);
				},
				listeners: {
					change: function(slider, newValue, thumb, eOpts) {
						if (needReact) {
							chrome.extension.getBackgroundPage().bg.time = chrome.extension.getBackgroundPage().bg.duration / 100.0 * newValue;
						}
					}
				}
			},
			{
				id: "volume",
				xtype: "slider",
				width: 60,
				stateId: 'volume',
				stateful: true,
				value: chrome.extension.getBackgroundPage().bg.volume,
				increment: 1,
				minValue: 0,
				maxValue: 100,
				listeners: {
					change: function(slider, newValue, thumb, eOpts) {
						chrome.extension.getBackgroundPage().bg.volume = newValue;
					}
				}
			},
			{
				id: "pinned",
				icon: "images/pinnedsmall.png",
				pressed: localStorage.pinned,
				enableToggle: true,
				toggleHandler: function(button, state) {
					if (state) localStorage.pinned = 1;
					else localStorage.removeItem("pinned");
					countDown();
				},
			}
		]
	});
});
